<template>
  <div class="detailed">
    <div class="deta-img">
      <!-- <img :src="datas[0].src" alt=""> -->
      <div class="block">
        <el-carousel height="550px" width="600px">
          <el-carousel-item>
            <h3 class="small" v-if="datas.length > 0 && datas[0].src"><img :src="datas[0].src" alt=""></h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="deta-title" v-for="item in datas" :key="item.id">
      <h2>{{ item.Chinesename }}</h2>
      <p>{{ item.theintroduce }}</p>
      <span class="deta-price">{{ item.theprice }}</span>
      <div class="line"></div>
      <div class="deta-gps">
        <div><i class="iconfont">&#xe60d;</i>
          <span class="deta-gps-span">四川省</span>
          <span class="deta-gps-span">成都市</span>
          <span class="deta-gps-span">高新区</span>
          <span class="deta-gps-span">天府五街</span>
          <span class="deta-gps-xg">修改</span>
        </div>
      </div>
      <div class="ver-title">选择版本</div>
      <div class="ver-model">
        <ul>
          <li>{{ item.version1 }}</li>
          <li>{{ item.version2 }}</li>
          <li>{{ item.version3 }}</li>
          <li>{{ item.version4 }}</li>
        </ul>
      </div>
      <div class="color-title">选择颜色</div>
      <div class="color-model">
        <ul>
          <li>{{ item.corlo1 }}</li>
          <li>{{ item.corlo2 }}</li>
          <li>{{ item.corlo3 }}</li>
          <li>{{ item.corlo4 }}</li>
        </ul>
      </div>
      <div class="suit-title">选择套装</div>
      <div class="suit-model">
        <ul>
          <li>{{ item.suit }}</li>
        </ul>
      </div>
      <div class="selected">
        <span class="sele-title">{{ item.General }}</span>
        <div class="summary">总计: <span class="">{{ item.theprice }}</span></div>
      </div>
      <div class="deta-btn btn-top">
        <span class="sale-btn" @click="addToCart" :plain="true">加入购物车</span>
        <span class="like-btn" @click="addToLick" v-if="token !== ''"><i class="el-icon-star-off"></i>喜欢</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    const savedToken = localStorage.getItem('token');
    if (savedToken) {
      this.token = savedToken;
    } else {
      this.token = '';
    }
  },
  data: {
    return() {
      return {
        token: '',
      }
    },
  },
  props: {
    datas: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    addToCart() {
      if (this.token) {
        this.$emit('add-cart', this.datas);
        this.$message({
          showClose: true,
          message: '添加购物车成功!',
          type: 'success'
        });
      } else {
        this.$message({
          showClose: true,
          message: '加入购物车失败请先登录',
          type: 'error'
        });
      }

    },
    addToLick() {
      //将数据传给父组件进行操作
      this.$emit('add-like', this.datas);
    }
  }
}
</script>

<style scoped>
@import url('../../assets/css/font_4367545_5vuckvup5pp/iconfont.css');

.el-carousel__item h3 {
  font-size: 14px;
  opacity: 1;
  line-height: 150px;
  margin: 0;
}

.deta-img img {
  width: 100%;
  height: 100%;

}

/* 详细页开始 */
.detailed {
  display: flex;
  justify-content: space-between;
  width: 1226px;
  height: 900px;
  margin: 100px auto;
}

.deta-img {
  width: 500px;
  height: 500px;
  /* background-color: #fff; */
}

.deta-img img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.deta-title {
  width: 600px;
  height: 360px;
}

.deta-title h2 {
  font-size: 24px;
  font-weight: 400;
  color: #212121;
}

.deta-title p {
  color: #b0b0b0;
  margin: 0;
  padding: 0;
  padding-top: 8px;
  line-height: 1.5;
  font-size: 14px;
}

.deta-title .deta-price {
  display: block;
  margin-top: 25px;
  color: #ff6700;
  font-size: 18px;
}

.deta-title .line {
  margin-top: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.deta-gps {
  margin-top: 20px;
  width: 600px;
  height: 100px;
  border: 1px solid #e0e0e0;
  background-color: #fafafa;
  text-align: center;
  line-height: 100px;
}

.deta-gps .iconfont {
  font-size: 20px;
}

.deta-gps-span {
  font-size: 15px;
  color: #333;
}

.deta-gps-xg {
  color: #f25807;
  font-size: 15px;
  margin-left: 5px;
}

.ver-title {
  margin-top: 20px;
  width: 600px;
  height: 30px;
  font-size: 18px;
}

.ver-model {
  margin-top: 10px;
  width: 600px;
  height: 110px;
}

.ver-model ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ver-model ul li {
  text-align: center;
  line-height: 42px;
  margin-top: 10px;
  width: 292px;
  height: 42px;
  color: #757575;
  border: 1px solid #e0e0e0;
}

.ver-model ul li:nth-child(1) {
  border: 1px solid #f25807;
  color: #f25807;
}

.ver-model ul li:hover {
  border-color: #ff6700;
  color: #f25807;
}

.color-title {
  margin-top: 20px;
  width: 600px;
  height: 30px;
  font-size: 18px;
}

.color-model {
  margin-top: 10px;
  width: 600px;
  height: 110px;
}

.color-model ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.color-model ul li {
  text-align: center;
  line-height: 42px;
  margin-top: 10px;
  width: 292px;
  height: 42px;
  color: #757575;
  border: 1px solid #e0e0e0;
}

.color-model ul li:nth-child(1) {
  border: 1px solid #f25807;
  color: #f25807;
}

.color-model ul li:hover {
  border: 1px solid #f25807;
  color: #f25807;
}

.suit-title {
  margin-top: 20px;
  width: 600px;
  height: 30px;
  font-size: 18px;
}

.suit-model {
  margin-top: 10px;
  width: 600px;
  height: 110px;
}

.suit-model ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.suit-model ul li {
  text-align: center;
  line-height: 42px;
  margin-top: 10px;
  width: 292px;
  height: 42px;
  color: #757575;
  border: 1px solid #e0e0e0;
}

.suit-model ul li:nth-child(1) {
  border: 1px solid #f25807;
  color: #f25807;
}

.selected {
  text-align: center;
  width: 600px;
  height: 146px;
  background-color: #f9f9fa;
}

.sele-title {

  line-height: 40px;
  color: #616161;
}

.summary {
  line-height: 125px;
  font-size: 30px;
  color: #f25807;
}

.data-btn {
  margin-top: 30px;
  width: 600px;
  height: 53px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #ff6700;
}

.btn-top {
  cursor: pointer;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.sale-btn {
  text-align: center;
  line-height: 53px;
  color: #f9f9fa;
  font-size: 18px;
  font-weight: 400;
  display: block;
  width: 300px;
  height: 53px;
  background: #ff6700;
  border-color: #ff6700;
}

.like-btn {
  text-align: center;
  line-height: 53px;
  width: 150px;
  height: 53px;
  background: #b0b0b0;
  color: #f9f9fa;
  font-size: 18px;
  font-weight: 500;
  margin-right: 125px;
  font-weight: 600;

}

.el-icon-star-off {
  font-weight: 600;
}
</style>